import React, { useState,useEffect } from 'react'

export default function LifeFn() {
    const [carNumbers,setCarNumbers] = useState([])
    useEffect(() => {
        //进入mount生命周期。定时产生车牌
        LifeFn.timmer = setInterval(() => {
            createMore()
        }, 300);
        return ()=>{
            clearInterval(LifeFn.timmer)
        }
    }, [])
    const createMore = ()=>{
        let array = []
        for (let index = 0; index < 6; index++) {
            const result = createNumber()
            array.push(result)
        }
        setCarNumbers(array)
    }
    const pause = ()=>{
        clearInterval(LifeFn.timmer)
    }
    //产生一个车牌
    const createNumber = ()=>{
        let array = []
        //产生三个数字
        for (let index = 0; index < 3; index++) {
            const data = Math.floor(Math.random() * 10)
            array.push(data)
        }
        for (let index = 0; index < 2; index++) {
            const data = Math.random() * 26 + 65
            const chat = String.fromCharCode(data)
            array.push(chat)
        }
        //乱序
        array.sort((a,b)=>{
            return 0.5-Math.random()
        })
        //将数组里数据合并成一个对象
        const carResult = "粤A " + array.join("")
        let obj = {
            name:carResult,
            state:false
        }
        return obj
    }

    
    return (
        <div>
            <h2>车牌选号</h2>
            <ul>
                {carNumbers.map(item=>{
                    return <li key={item.name}>{item.name}</li>
                })}
            </ul>
            <p>你选中车牌：</p>
            <button onClick={pause}>暂停</button>
        </div>
    )
}
